{% extends "base.html" %}

{% block title %}VXBattle - 欢迎来到游戏世界{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="game-container p-5 text-center">
            <div class="mb-4">
                <i class="fas fa-gamepad fa-5x text-primary mb-3"></i>
                <h1 class="display-4 fw-bold text-primary mb-3">VXBattle</h1>
                <p class="lead text-muted mb-4">欢迎来到VXBattle的世界！一个充满冒险与挑战的在线游戏。</p>
            </div>

            <div class="row mb-4">
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-users fa-3x text-info mb-3"></i>
                            <h5 class="card-title">角色系统</h5>
                            <p class="card-text">创建独特的角色，选择不同的职业，体验不同的游戏风格。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                            <h5 class="card-title">挂机系统</h5>
                            <p class="card-text">即使离线也能获得经验，让你的角色持续成长。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-sword fa-3x text-danger mb-3"></i>
                            <h5 class="card-title">战斗系统</h5>
                            <p class="card-text">与其他玩家进行激烈的PVP战斗，证明你的实力。</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg me-md-2">
                    <i class="fas fa-sign-in-alt me-2"></i>立即登录
                </a>
                <a href="{{ url_for('register') }}" class="btn btn-outline-primary btn-lg">
                    <i class="fas fa-user-plus me-2"></i>免费注册
                </a>
            </div>

            <div class="mt-5">
                <h3 class="text-primary mb-3">游戏特色</h3>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-1">多职业选择</h6>
                                <small class="text-muted">战士、法师、弓箭手、盗贼四大职业</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-1">智能挂机</h6>
                                <small class="text-muted">最长4小时挂机时间，自动获得经验</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-1">多样地图</h6>
                                <small class="text-muted">从新手村到龙穴深处，丰富的挂机地点</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-1">实时更新</h6>
                                <small class="text-muted">Web界面实时显示角色状态和收益</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}